<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>cardGame_8</title>
    <style>
        body {margin: 0;background-color: #eef3fc;}
        input {
            border: none;
            background-color: #79bad1;
            width: 200px;
            outline: none;
            padding-left: 12px;
            border-radius: 8px;
        }
        #background-layer {
            position: absolute;
            width: 100vw;
            height: 100vh;
            top: 0;
            left: 0;
            z-index: 8;
            background-color: #82a8ef83;
        }
        #center-box {
            position: relative;
            width: fit-content;
            height: 100vh;
            max-width: 100vw!important;
            margin: 0 auto;
            display: flex;
            align-content: center;
            align-items: center;
            justify-content: center;
            flex-wrap: wrap;
        }
        #center-box > div {
            width: 70px;
            height: 100px;
            border-radius: 8px;
            margin: 9px;
            overflow: hidden;
            transition: 1s;
            transform-style: preserve-3d;
            transform: rotateY(180deg);
            box-shadow: 1px 3px 3px #4e4e4e;
        }
        #center-box > div:hover { box-shadow: 1px 8px 9px #4e4e4e;}
        .font {
            position: absolute;
            width: 60px;
            height: 90px;
            top: 0;
            left: 0;
            padding: 5px;
            backface-visibility: hidden;
            background-position: center center;
            background-repeat: no-repeat;
            background-size: 100% 100%;
            background-image: url('Resources/imgs/th.jpeg');
            z-index: 3;
        }
        .back {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            display: flex;
            text-align: center;
            font-size: 12px;
            backface-visibility: hidden;
            background-position: center center;
            background-repeat: no-repeat;
            background-size: 100% 100%;
            background-image: url('Resources/imgs/2208box_a.jpg');
            justify-content: center;
            align-items: center;
        }
        #setting-box {
            position: absolute;
            min-width: 320px;
            width: 36vw;
            height: 100vh;
            left: 0;
            top: 0;
            background-color: #d2e3fc;
            box-shadow: 4px -2px 20px 1px #8f8f8f;
            z-index: 9;
            transition: .6s;
            overflow-y: auto;
        }
        #setting-box::-webkit-scrollbar { height: 100vh; width: 4px;}
        #set-icon {
            position: fixed;
            width: 20px;
            height: 20px;
            top: 10px;
            right: 10px;
            display: none;
            cursor: pointer;
        }
        #top-message {
            position: absolute;
            width: 100%;
            height: 20px;
            top: 5px;
            left: 0;
            text-align: center;
            color: #ffa500;
        }
        #setting-but {
            position: relative;
            width: 300px;
            height: 40px;
            margin: 30px auto;
        }
        #setting-but div {
            width: 60px;
            height: 28px;
            margin: 5px;
            background-color: #cbe6ff;
            border: 2px solid #9d72d7;
            border-radius: 6px;
            float: left;
            display: flex;
            align-content: center;
            justify-content: center;
            cursor: pointer;
            transition: .6s;
        }
        #setting-but div:hover {border-color: #096dd9;}
        #info-box {
            position: fixed;
            width: 100vw;
            height: 100vh;
            top: 0;
            left: 0;
            background-color: #eef3fc;
            z-index: 12;
            display: none;
        }
        #info-box h3 { margin-left: 10px; font-size: 20px; cursor: pointer;}
        #info-box h4 {color: #79bad1;font-size: 22px;margin: 0 0 9px 18px;}
        #info-box p { margin-left: 2em;}
        #data-table {
            position: relative;
            width: 300px;
            height: fit-content;
            margin: 30px auto;
        }
        #data-table p {
            width: 298px;
            height: 28px;
            padding: 1px;
            color: #096dd9;
            background-color: #eef3fc;
            backdrop-filter: blur(30px);
            margin: 4px 0 4px 0;
            border-radius: 8px;
        }
        .table-text {
            width: 260px;
            line-height: 28px;
            padding-left: 12px;
            overflow: hidden;
        }
        .table-num {
            float: right;
            padding: 4px;
            margin-right: 6px;
            line-height: 20px;
            color: #096dd9;
            background-color: #eef3fc;
            border-radius: 12px;
            transition: .6s;
        }
        .table-num:hover { background-color: #ffccc7;}
        .table-del {
            height: 22px;
            width: 22px;
            text-align: center;
            border-radius: 12px;
            cursor: pointer;
            transition: .6s;
        }
        .table-del:hover { background-color: #d9363e;}
    </style>
</head>
<body>
    <div id="background-layer"></div>

    <div id="center-box">
    </div>
    <div id="setting-box">
        <div id="set-icon" type="setIcon">⚙️</div>
        <div id="top-message"></div>
        <div id="setting-but">
            <div type="start">开始🏁</div>
            <div type="add">添加🎆</div>
            <div type="style">样式🥻</div>
            <div type="info">说明💡</div>
        </div>
        <div id="info-box" style="display: none;">
            <h3 onclick="set.info();">⬅️</h3>
            <h4>使用说明</h4>
            <p>1、点击文字进入编辑状态，左方标志变成绿点🟢，点击绿点🟢退出编辑。</p>
            <p>2、点击数字，数字背景变化，进入数字输入状态，键盘输入数字后退出数字编辑状态(数字限定1~9)。点击两次数字也可完成数字加一，数字将在1~9内循环。</p>
            <p>3、样式选项中你可以选择相应的卡片样式。</p>
            <hr/>
            <h4>快捷键</h4>
            <p> { Enter -> 开始🏁}{ + -> 添加🎆 }{ Tab -> 样式🥻}{ h -> 说明💡}{ Esc -> 进入数字编辑时退出编辑状态 }{ s -> 打开编辑⚙️ }{ F11 -> 进入网页全屏 }</p>
            <hr/>
            <h4>软件信息</h4>
            <p>作者：失言，当前版本：0.0.1，联系方式：misspeaknl@gmail.com，留言链接：<a href="https://www.yuque.com/forms/share/1cb908ea-138f-482f-b22c-3efc0f6f8454">点击这里</a></p>
            <P>
                版本说明：[v_0.0.1] _2022-08-09_完成了基础的抽签功能，初步实现预期效果。
                样式功能模块尚未开发，如这个应用真的有人用可以通过<a href="https://www.yuque.com/forms/share/1cb908ea-138f-482f-b22c-3efc0f6f8454">留言链接</a>联系我，有人用了再考虑更新样式功能。
                最后此应用上传至gittee托管平台，使用了gitteePage进行静态网页部署。
            </P>
        </div>
        <div id="data-table">
            <p><span class="table-del" type="delCard">🗑️</span><span class="table-text" type="edit">在此键入内容</span><span class="table-num" type="editNum">1</span></p>
            <p><span class="table-del" type="delCard">🗑️</span><span class="table-text" type="edit">在此键入内容</span><span class="table-num" type="editNum">1</span></p>
        </div>
    </div>
    <script>
        let numEvent;
        let inputBox = document.createElement("input");
        let centerBox = document.getElementById("center-box");
        let topMesBox = document.getElementById("top-message");
        let setBox = document.getElementById("setting-box");
        let dataTable = document.getElementById("data-table");
        let infoBox = document.getElementById("info-box");
        let backgroud = document.getElementById("background-layer");
        let cardCount = 2;
        let editMoment = false;
        let showMoment = false;
        let rootMoment = "edit";
        let textList = []; //记录需要摆出的卡篇的字面内容。
        class Set {
            constructor(elem) {
                this._elem = elem;
                elem.onclick = this.onClick.bind(this);
            }
            start(event) {
                if(editMoment) return false;
                if(rootMoment === "go") return false;
                rootMoment = "go";
                textList = [];
                centerBox.innerHTML = "";
                setBox.style.left = "-100%";
                backgroud.style.display = "none";
                document.getElementById("set-icon").style.display = "block";
                let numList = document.getElementsByClassName("table-num");
                let tableText = document.getElementsByClassName("table-text");
                let count = 0;
                for(let i=0; i < cardCount; i++) {
                    count += Number(numList[i].innerHTML);
                    for(let j=0; j < Number(numList[i].innerHTML); j++) {
                        textList[textList.length] = tableText[i].innerHTML;
                    }
                }
                if(count < 10) { centerBox.style.width = "300px";}
                    else if(count < 17) { centerBox.style.width = "400px";}
                        else if(count < 25) { centerBox.style.width = "600px";}
                            else if(count < 33) { centerBox.style.width = "800px";}
                                else centerBox.style.width = "fit-content";
                for(let i=1; i <= count; i++) {
                    let div = document.createElement("div");
                    div.innerHTML = "<div class='font'></div><div class='back'>内容</div>";
                    setTimeout(() => { centerBox.append(div);}, i*80);
                }
            }
            add(event) {
                if(cardCount > 60) return popTopTip("最多显示61个可编辑选项");
                let setCon = document.createElement("p");
                setCon.innerHTML = "<span class='table-del' type='delCard'>🗑️</span><span class='table-text' type='edit'>在此键入内容</span><span class='table-num' type='editNum'>1</span>"
                dataTable.append(setCon);
                cardCount++;
            }
            delCard(event) {
                if(cardCount > 2){
                    event.target.parentNode.remove();
                    cardCount--;
                }
                else popTopTip("至少保留2项内容。");
            }
            exitEdit(event) {
                editMoment = false;
                let cardValue = event.target.nextSibling.value===""?"在此键入内容":event.target.nextSibling.value;
                if(event.target.nextSibling.value.length > 14) cardValue = "卡片内容不能超过14字!";
                event.target.nextSibling.outerHTML = "<span class='table-text' type='edit'></span>";
                event.target.nextSibling.innerHTML =  cardValue;
                event.target.innerHTML = "🗑️";
                event.target.setAttribute("type", "delCard");
            }
            edit(event) {
                if(editMoment) return 0;
                event.target.previousSibling.innerHTML = "🟢";
                event.target.previousSibling.setAttribute("type", "exitEdit");
                editMoment = true;
                event.target.outerHTML = inputBox.outerHTML;
            }
            editNum(event) {
                if(editMoment) {
                    editMoment = false;
                    event.target.style.backgroundColor = "";
                    event.target.innerHTML = Number(event.target.innerHTML)%9 + 1;
                    return false;
                }
                editMoment = true;
                event.target.style.backgroundColor = "#096dd9";
                numEvent = event;
            }
            style(event) {
                popTopTip("样式设计,此模块尚未开发。");
                //wait...
            }
            info(event) {
                if(infoBox.style.display === "none") { infoBox.style.display = "block";}
                    else { infoBox.style.display = "none";}
            }
            setIcon(event) {
                setBox.style.left = "0";
                document.getElementById("set-icon").style.display = "none";
                backgroud.style.display = "block";
                centerBox.innerHTML = "";
                rootMoment = "edit";
            }
            onClick(event) {
                let action = event.target.getAttribute("type");
                if(action) {
                    this[action](event);
                }
            }
        }
        let set = new Set(setBox);
        class Show {
            constructor(elem) {
                this._elem = elem;
                elem.onclick = this.onClick.bind(this);
            }
            DIV(event) {
                if(event.target.parentNode.tagName === "BODY") return false;
                if(showMoment) return false;
                showMoment = true;
                event.target.parentNode.style.transform = "rotateY(0deg)";
                setTimeout(() => { event.target.style.zIndex = "0";}, 350);
                setTimeout(() => { showMoment = false;}, 600);
                if(event.target.nextSibling) event.target.nextSibling.innerHTML = textList.splice(randomNum(0, textList.length-1), 1);
                //【BUG】在牌面还未翻过去之前不停点击会导致在一张牌上多次执行切除，引入showMoment解决。
            }
            onClick(event) {
                let action = event.target.tagName;
                if(action) {
                    this[action](event);
                }
            }
        }
        let show = new Show(centerBox);
        document.onkeydown = keyDown;
        function keyDown(event) {
            var event = event || window.event;  // 标准化事件对象
            if(event.keyCode > 48 && event.keyCode <58) {
                numEvent.target.innerHTML = event.keyCode - 48;
                numEvent.target.style.backgroundColor = "";
                editMoment = false;
                return true;
            }
            switch(event.keyCode) {
                case 9:
                    set.style();
                case 13:
                    set.start();
                    break;
                case 27:
                    numEvent.target.innerHTML = 1;
                    numEvent.target.style.backgroundColor = "";
                    editMoment = false;
                    break;
                case 72:
                    set.info();
                case 83:
                    set.setIcon();
                    break;
                case 107:
                case 187:
                    set.add();
                    break;
            }
        }
        let popTopTip = function (text) {
            topMesBox.innerHTML = text;
            setTimeout( () => { topMesBox.innerHTML = ""}, 3000)
        }
        let randomNum = function (minNum,maxNum){ 
            switch(arguments.length){ 
                case 1: 
                    return parseInt(Math.random()*minNum+1,10); 
                break; 
                case 2:
                    return parseInt(Math.random()*(maxNum-minNum+1)+minNum,10); 
                break; 
                default: 
                    return false; 
            } 
        }
    </script>
</body>
</html>